import React, { Component } from 'react';
import {
	StyleSheet, View, Text, ScrollView,
	Image, ImageBackground, TextInput, DeviceEventEmitter
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';

const scale = GLOBAL.SCALE;
const oDate = new Date();
let nowYear = oDate.getFullYear();
let nowMonth = oDate.getMonth() + 1;

export class AddMyPlanPage extends Component {

	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '我的计划',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};



	constructor(props) {
		super(props);
		this.state = {
			pageStatus: {
				status: 'loading'
			},
			monthData: {},
			yearData: {},
			productNameSet: ''
		}
		this.sendObj = {   // 参数
			productName: '',  //商品名字
		}
	}


	async	_getDetial () {
		let detialData = await HTTP.POST(API_GENERATE(API.MY_PLAN_DETIAL));
		console.log('detialData1234567');
		console.log(detialData)
		if (detialData && detialData.length) {
			this.setState({
				pageStatus: {
					status: 'data'
				},
				productNameSet: detialData[0].productName
			})
			this.sendObj.productName = detialData[0].productName;
			for (var i = 0; i < detialData.length; i++) {
				if (detialData[i].planCycle == '1') {   // 月 1
					this.setState({
						monthData: detialData[i]
					});
				} else if (detialData[i].planCycle == '2') {
					this.setState({
						yearData: detialData[i]
					})
					this.sendObj.yearId = detialData[0].planId;
				}
			}
		} else {
			this.setState({
				pageStatus: {
					status: 'empty'
				}
			})
		}
	}

	//初始化数据
	async componentWillMount () {
		this._getDetial();
	}

	componentWillUnmount () {
		DeviceEventEmitter.emit('passByValue', { value: true });
	}


	async _callBack () {

		//参数
		let responseData = await HTTP.POST(API_GENERATE(API.MY_PLAN_ADD), this.sendObj);


		if (responseData) {
			//成功弹框
			ToastUtil.showSuccess('计划已提交').then(() => {
				this.props.navigation.navigate('MyPlanPage');
			})
		}
	}


	render () {
		let { pageStatus, monthData, yearData, productNameSet } = this.state;
		return (
			<View style={styles.container}>
				<View style={{ position: 'absolute', width: '100%' }}>
					<View style={{ height: 90 * scale, width: '100%', backgroundColor: style.color.themeColor }}>
					</View>
				</View>
				<View style={styles.head}>
					<Text style={styles.headText}>商品：{productNameSet}</Text>
				</View>

				<View style={styles.body}>
					<ScrollView style={{ width: '100%' }}>
						<View style={{ paddingLeft: 15 * scale, paddingRight: 15 * scale }}>
							<ImageBackground style={styles.planForm} source={require('../../../imgs/plan/planBg.png')} >
								<View style={[styles.planBox, { paddingTop: 6 * scale }]}>
									<Text style={styles.planName}>{nowYear}年{nowMonth}月计划</Text>
									<View style={[styles.playMore]}>
										<TextInput
											ref="passwordInput"
											style={styles.planInput}
											underlineColorAndroid='transparent'
											placeholder={"0"}
											placeholderTextColor="#BFBFBF"
											maxLength={20}
											keyboardType='numeric'
											value={this.sendObj.planQuantity}
											onChangeText={(txt) => {
												this.sendObj.planQuantity = txt;
											}}
										/>
									</View>
								</View>
								<View style={styles.planBox}>
									<Text style={styles.planName}>预测价格</Text>
									<View style={[styles.playMore]}>
										<Text style={styles.planText}>￥</Text>
										<TextInput
											ref="passwordInput"
											style={styles.planInput}
											underlineColorAndroid='transparent'
											placeholder={"0"}
											placeholderTextColor="#BFBFBF"
											maxLength={20}
											keyboardType='numeric'
											value={this.sendObj.planPrice}
											onChangeText={(txt) => {
												this.sendObj.planPrice = txt;
											}}
										/>
									</View>
								</View>
							</ImageBackground>
							{
								pageStatus.status === 'data' ?
									<View>
										<ImageBackground style={styles.monthBg} source={require('../../../imgs/plan/planBox.png')}>
											<Text style={styles.monthText}>上月</Text>
											<View style={styles.monthBox}>
												<View>
													<Text style={styles.monthTitle}>{monthData.planQuantity}</Text>
													<Text style={styles.monthP}>上月计划</Text>
												</View>
												<View>
													<Text style={styles.monthTitle}>{monthData.saleQuantity || 0}</Text>
													<Text style={styles.monthP}>上月执行</Text>
												</View>
												<View>
													<Text style={styles.monthTitle}>{monthData.executeRate}</Text>
													<Text style={styles.monthP}>上月执行率</Text>
												</View>
											</View>
										</ImageBackground>
										<ImageBackground style={styles.monthBg} source={require('../../../imgs/plan/planBox.png')}>
											<Text style={styles.monthText}>年度</Text>
											<View style={styles.monthBox}>
												<View>
													<Text style={styles.monthTitle}>{yearData.planQuantity}</Text>
													<Text style={styles.monthP}>年度计划</Text>
												</View>
												<View>
													<Text style={styles.monthTitle}>{yearData.saleQuantity || 0}</Text>
													<Text style={styles.monthP}>年度执行</Text>
												</View>
												<View>
													<Text style={styles.monthTitle}>{yearData.executeRate}</Text>
													<Text style={styles.monthP}>年度执行率</Text>
												</View>
											</View>
										</ImageBackground>
									</View> : <View style={{ flex: 1 }}>
										<PageStatusIndex {...pageStatus} />
									</View>
							}
						</View>
					</ScrollView>
				</View>
				<View style={styles.planBottom}>
					<Common type="bottom" title="提交" allClick={this._showVisible} callBack={() => { this._callBack.call(this) }} />
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.white,
	},
	head: {
		height: 48 * scale,
	},
	headText: {
		backgroundColor: style.color.themeColor,
		fontSize: 18 * scale,
		color: style.color.white,
		lineHeight: 30 * scale,
		height: 30 * scale,
		paddingLeft: 20 * scale
	},
	body: {
		flex: 1,
		marginBottom: 60 * scale,
		flexDirection: 'column',
		justifyContent: 'center'
	},
	planForm: {
		width: 345 * scale,
		height: 174 * scale,
	},
	planBox: {
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale,
	},
	planName: {
		fontSize: 13 * scale,
		color: style.color.darkGray,
		lineHeight: 30 * scale,
		height: 30 * scale,
		marginTop: 4 * scale
	},
	playMore: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		width: 305 * scale,
		height: 40 * scale,
		borderRadius: 4 * scale,
		backgroundColor: '#EFF2F2',

	},
	planInput: {
		fontSize: 18 * scale,
		color: '#101010',
		height: 40 * scale,
		lineHeight: 40 * scale,
		paddingTop: 0,
		paddingBottom: 0
	},
	planText: {
		fontSize: 18 * scale,
		color: '#101010',
		height: 40 * scale,
		lineHeight: 40 * scale,
	},

	monthBg: {
		marginTop: 5 * scale,
		width: 345 * scale,
		height: 130 * scale,
	},
	monthText: {
		fontSize: 14 * scale,
		textAlign: 'center',
		color: '#fff',
		height: 24 * scale,
		lineHeight: 24 * scale,
		paddingRight: 8 * scale
	},
	monthBox: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems: 'center',
		marginTop: 25 * scale
	},
	monthTitle: {
		height: 25 * scale,
		fontSize: 20 * scale,
		color: style.color.dark,
		textAlign: 'center',
	},
	monthP: {
		fontSize: 12 * scale,
		color: style.color.darkGray,
		marginTop: 8 * scale
	},
	planBottom: {
		height: 60 * scale,
		width: '100%',
		backgroundColor: style.color.white,
		position: 'absolute',
		bottom: 0
	}


})